<template>
    <div class="admim-nav">
        <div>
            <el-icon>
                <Tickets />
            </el-icon>
            <span>
                数据列表
            </span>
        </div>
        <div>
            <el-button type="primary" @click="addmenu()">添加</el-button>
        </div>
    </div>
    <el-table :data="newData.value ? newData.value : tableData" border>
        <el-table-column prop="id" label="编号" width="60" height="40"></el-table-column>
        <el-table-column prop="title" label="菜单名称" width="140" height="40"></el-table-column>
        <el-table-column label="菜单级数" width="140" height="40">
            <template #default="scope">
                <div>
                    {{ scope.row.parentId == 0 ? '一级' : '二级' }}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="前端名称" width="140" height="40"></el-table-column>
        <el-table-column prop="icon" label="前端图标" width="140" height="40"></el-table-column>
        <el-table-column prop="hidden" label="是否显示" width="140" height="40">
            <template #default="scope">
                <el-switch @click="updateStatusFn(scope.row)" :value="scope.row.hidden === 1 ? true : false" />
            </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="140" height="40"></el-table-column>
        <el-table-column label="设置" width="140" height="40">

            <template #default="scope">
                <el-button type="primary" @click="viewSubordinates(scope.row)">查看下级</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="140" height="40">
            <!-- <el-button type="primary" @click.prevent="addmenus(scope.$index)">编辑</el-button> -->
            <template #default="scope">
                <el-button type="primary" @click.prevent="addmenu(scope.row.id)">
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
        :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper"
        :total="paginations ? paginations.total : pagination.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
import * as api from '../../request/api'
import useTable from '../../hooks/useTables'
import { ref, reactive } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute, RouterView } from 'vue-router';
const router = useRouter()
const newData: any = ref([])
const paginations: any = ref()
// const getmenulist = async () => {
//      const res = await api.admin.getmenulist()
//     tableDatas.value = res.children
//     console.log(tableDatas);

// }
// getmenulist()

let { tableData, getTableData, pagination } = useTable(api.admin.getmenu)
console.log(tableData);


getTableData()
const handleSizeChange = (val: number) => {
    getTableData()
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    // console.log(`current page: ${val}`)
}
//添加
const addmenu = (id?: string) => {
    console.log(id);
    router.push({
        path: '/ums/addMenu',
        query: { id }

    });

}
//查看下级
const viewSubordinates = (row: any) => {
    console.log(row);
    let { tableData, getTableData, pagination } = useTable(api.admin.getMenus, {
        parentId: row.id,
    })
    getTableData()
    newData.value = tableData
    paginations.value = pagination
    console.log(newData);

    return newData
}
//是否显示
let updateStatusFn = async (row: any) => {
    ElMessageBox.confirm(
        '是否要修改该状态?', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            console.log(row);
            // console.log(row.id);
            // console.log(row.status);
            let query = reactive({
                id: row.id,
                hidden: row.hidden == 1 ? 0 : 1
            })
            // console.log(query1);

            let newQuery = JSON.parse(JSON.stringify(query))
            console.log(newQuery);

            await api.admin.getMenuDisplay(newQuery)
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
</script>

<style lang="scss" scoped>
.admim-nav {
    width: 96%;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0px;
    margin-top: 60px;
    margin-bottom: 20px;
    ;

    .example-pagination-block {
        margin-top: 10px;
        float: right;
    }
}
</style>